<%@ page import="com.zzn.bookManage.pojo.ResultEntity" %>
<%@ page import="com.zzn.bookManage.pojo.Book" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="loginUser" class="com.zzn.bookManage.pojo.User" scope="session"/>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>修改图书</title>
  <%@ include file="head.jsp" %>
</head>
<body>

<%!
  ResultEntity<Book> result;
  Book book;
  String msg;
%>
<%
  request.setCharacterEncoding("UTF-8");
  msg = (String) request.getAttribute("msg");
  result = (ResultEntity<Book>) request.getAttribute("result");
  result = result!=null? result :new ResultEntity<>();
  book = result.getData().get(0)==null?new Book():result.getData().get(0);
%>


<div id="app">
  <div class="container">
    <div class="row primary-bg align-items-center">
      <div class="col-3">
        <img src="./assets/logo.png" class="m-auto card-img-top" alt="logo" style="width: 80px">
      </div>
      <div class="col-auto ml-auto">
        <span>Hello! <strong><%=loginUser.getNickname()%></strong></span>
        <form action="${pageContext.request.contextPath}/userLogout" method="post" style="display: inline">
          <button type="submit" class="btn btn-sm btn-info ml-4">退出登录</button>
        </form>
      </div>
    </div>
    <div class="row">
      <!--      侧边栏-->
      <div class="col-md-2 col-sm-1 secondary-bg px-0" style="height: 800px">
        <div class="btn-group-vertical full-width" role="group" aria-label="Basic example">
          <a href="${pageContext.request.contextPath}/list?page=1" class="full-width">
            <button type="button" class="btn full-width btn-my-primary">首页</button>
          </a>
          <a href="${pageContext.request.contextPath}/setting.jsp" class="full-width">
            <button type="button" class="btn btn-my-primary full-width">用户设置</button>
          </a>
          <a href="${pageContext.request.contextPath}/listBorrow?page=1" class="full-width">
            <button type="button" class="btn btn-my-primary full-width">借阅管理</button>
          </a>
        </div>
      </div>
      <!--      内容部分-->
      <div class="col-md-10 col-sm-11 bg-white" style="overflow: auto">
        <div class="card my-2">
          <div class="card-body">
            <div class="card-title">
              <h5>修改图书</h5>
            </div>

            <!--            修改图书表单-->
            <form action="${pageContext.request.contextPath}/editBook" method="post">
              <div class="form-group row">
                <input type="text" class="d-none" :value="bid" name="bid">
                <label for="name" class="col-sm-2 col-form-label">书名：</label>
                <div class="col-sm-10">
                  <input
                      type="text"
                      class="form-control"
                      id="name"
                      name="name"
                      required
                      maxlength="20"
                      v-model="bookName"
                  >
                  <small>{{bookName.length}}/20</small>
                </div>
              </div>
              <div class="form-group row">
                <label for="author" class="col-sm-2 col-form-label">作者：</label>
                <div class="col-sm-10">
                  <input
                      type="text"
                      class="form-control"
                      id="author"
                      name="author"
                      required
                      maxlength="20"
                      v-model="author"
                  >
                  <small>{{author.length}}/20</small>
                </div>
              </div>
              <div class="form-group row">
                <label for="publisher" class="col-sm-2 col-form-label">出版社：</label>
                <div class="col-sm-10">
                  <input
                      type="text"
                      class="form-control"
                      id="publisher"
                      name="publisher"
                      required
                      maxlength="20"
                      v-model="publisher"
                  >
                  <small>{{publisher.length}}/20</small>
                </div>
              </div>
              <div class="form-group row">
                <label for="price" class="col-sm-2 col-form-label">参考价格：</label>
                <div class="col-sm-10">
                  <input
                      type="number"
                      step="0.01"
                      class="form-control"
                      id="price"
                      name="price"
                      required
                      min="0"
                      v-model="price"
                  >
                </div>
              </div>
              <div class="form-group row">
                <label for="description" class="col-sm-2 col-form-label">简介：</label>
                <div class="col-sm-10">
                  <textarea
                      type="text"
                      class="form-control"
                      id="description"
                      name="description"
                      required
                      rows="2"
                      maxlength="50"
                      v-model="description"
                  ></textarea>
                  <small>{{description.length}}/50</small>
                </div>
              </div>
              <div class="form-group row">
                <label for="position" class="col-sm-2 col-form-label">存放位置：</label>
                <div class="col-sm-10">
                  <input
                      type="text"
                      class="form-control"
                      id="position"
                      name="position"
                      required
                      maxlength="20"
                      v-model="position"
                  >
                  <small>{{position.length}}/20</small>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-auto ml-auto">
                  <button type="button" @click="goBack()" class="btn btn-sm btn-danger mr-2">取消</button>
                  <button type="submit" class="btn btn-sm btn-primary">确认修改</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            bid:'<%=book.getBid()%>',
            bookName:'<%=book.getName()%>',
            author:'<%=book.getAuthor()%>',
            publisher:'<%=book.getPublisher()%>',
            description:'<%=book.getDescription()%>',
            position:'<%=book.getPosition()%>',
            price:'<%=book.getPrice()%>',
        },
        methods: {
            myDateFormat(dateStr='') {
                let str = dateStr.split('.')[0].split(' ')
                let now = new Date();
                let ii = new Date(dateStr);
                if (now.getDate() === ii.getDate()) {
                    return '今天 ' + str[1]
                } else if (now.getDate() === ii.getDate() - 1) {
                    return '昨天 ' + str[1]
                } else {
                    return dateStr.split('.')[0]
                }
            },
            goBack:function (){
                window.history.back()
            }
        },
        computed: {
            contentLength: function (str) {
                return str.length
            }
        },
    })
</script>
</body>
</html>
